﻿<%@ Page Language="C#" MasterPageFile="~/Template.master" AutoEventWireup="true" CodeFile="Design.aspx.cs" Inherits="Design" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<br />
<table style="font-weight:bold;" border="0" align="center" cellpadding="4" cellspacing="0">
            <tr align="center">
                        <td colspan="5" class="table_header"><strong>Thiết Kế Sản Phẩm</strong></td>
            </tr>
</table>
<br />
<script language=javascript>

var kieu = "namtayngan_";
var mau = 1;
var hinh = 0;
var loaimau = "<img src='ItemImages/hinhtrangtri/mau_1.JPG ' onclick='changeMau(1);' />&nbsp" +
"<img src='ItemImages/hinhtrangtri/mau_3.JPG' onclick='changeMau(3);' />&nbsp";
    function thanhtoan()
    {
        alert("Thanh toán thành công . Trong vòng 2 ngày chúng tôi sẽ liên lạc với bạn");
    }
    function saveThanhToan()
    {
        $("#divThanhToan").css("display","");
    }
    function saveThietKe()
    {
    if(nguoidung == 0)
    {
        alert("Bạn phải đăng nhập mới sử dụng được tính nắng này");
        return;
        
    }
        var url = "Controllers/xlThemSanPhamThietKe.aspx?";
        url += "mau=" + mau;
        url += "&kieu=" + kieu;
        url += "&hinh=" + hinh;
        url += "&sid=" + Math.random();
        url += "&nguoidung=" + nguoidung;
        jQuery.get(url, function(data)
        {
            if(data == 1)
                alert("Lưu thiết kế thành công");
           else
                alert("Lưu thất bại");
        });
    }
    function changeTrangTri(maTrangTri)
    {
        hinh = maTrangTri;
        $("#divTrangTri").html("<img src='ItemImages/hinhtrangtri/trangtri_" + maTrangTri + ".png' />");
    }
    
    function deleteHinhTrangTri()
    {
        $("#divTrangTri").html("");
        hinh = 0;
    }
    function changeKieu(maKieu)
    {
        
        if(maKieu == 1)
        {
        
        kieu = "namtayngan_";
          
          $("#divMau").html(loaimau + "<a onclick='changeMau(2)'><img src='ItemImages/hinhtrangtri/mau_2.JPG' /></a>");
        }
        if(maKieu == 2)
        {
        if( mau == 2)
            mau = 1;
        kieu = "namtaydai_";
        
         $("#divMau").html(loaimau);
        }
        if(maKieu == 3)
        {
        kieu = "nutayngan_";
          
           $("#divMau").html(loaimau + "<a onclick='changeMau(2)'><img src='ItemImages/hinhtrangtri/mau_2.JPG' /></a>");
        }
        if(maKieu == 4)
        {
        if(mau == 2)
            mau = 1;
        kieu = "nutaydai_";
         
         $("#divMau").html(loaimau);
        }
        $("#divThietKe").css("background-image","url(ItemImages/hinhmau/" + kieu + mau + ".JPG)");
       
    }
    function changeMau(maMau)
    {
       mau = maMau;
       $("#divThietKe").css("background-image","url(ItemImages/hinhmau/" + kieu + maMau + ".JPG)");
    }
    $("#document").ready( function()
{
});
</script>
<div style="width:360px; border:solid 1px aqua ;float:left;background-color:aqua; text-align:center">
<div style="width:360px; height:20px; text-align:left"><span style="color:Red">Chọn Kiểu : </span></div>
<img src="ItemImages/hinhmau/namtayngan_1.JPG" width="60px" height="66px" onclick="changeKieu(1)"/>
<img src="ItemImages/hinhmau/namtaydai_1.JPG" width="60px" height="66px" onclick="changeKieu(2)"/>
<img src="ItemImages/hinhmau/nutayngan_1.JPG" width="60px" height="66px" onclick="changeKieu(3)"/>
<img src="ItemImages/hinhmau/nutaydai_1.JPG" width="60px" height="66px" onclick="changeKieu(4)" />
<br />
<br />
</div>
<div style="width:300px; height:66px ; float:right">
</div>
<div id="divThietKe" style=" border-right:solid 1px aqua;border-left:solid 2px aqua ;float:left;width:360px; height:390px ; background-image: url('ItemImages/hinhmau/namtayngan_1.JPG')">
    
    <div id="divTrangTri" style=" width:120px; height:120px ;  margin-top:100px ; margin-left:120px; float:left"></div>
</div>
<div style="width:280px;background-color:White; height:390px ; float:right; border:solid 1px aqua ; text-align:center">
   
   <div style="width:280px; height:20px; text-align:left"><span style="color:Red">Chọn hình : </span></div>
    <div style="height:340px">
    <img src="ItemImages/hinhtrangtri/trangtri_1.png" width="90px" height="90px" onclick="changeTrangTri(1);" />
    <img src="ItemImages/hinhtrangtri/trangtri_2.png" width="90px" height="90px" onclick="changeTrangTri(2);"/>
    <img src="ItemImages/hinhtrangtri/trangtri_3.png" width="90px" height="90px" onclick="changeTrangTri(3);"/>
    </div>
    <div style="height:30px">
     <input type="button" value="Xóa hình trên áo" onclick="deleteHinhTrangTri();" />
    <br/>
    </div>
</div>
<div style="border:solid 1px aqua; float:left ;padding:0px 0px 10px 0px ;width:360px;background-color:aqua; text-align:center">
<div style="width:360px; height:20px; text-align:left"><span style="color:Red">Chọn Màu : </span></div>
<div id="divMau">
<img src="ItemImages/hinhtrangtri/mau_1.JPG" onclick="changeMau(1)" />
<img src="ItemImages/hinhtrangtri/mau_2.JPG" onclick="changeMau(2)"/>
<img src="ItemImages/hinhtrangtri/mau_3.JPG" onclick="changeMau(3)"/>
</div>
</div>

<div style="clear:both; width:100%; text-align:center; padding-top:30px ; font-size:20px">
    <input type="button" value="Lưu thiết kế" onclick="saveThietKe();"/>
    <input type="button" value="Thanh Toán" onclick="saveThanhToan();"/>
</div>
<div id="divThanhToan" style=" display:none; text-align:center">
    Vui lòng nhập đầy đủ thông tin dưới đây : 
    <br />
    <table align=center>
    <tr><td>Họ Tên :</td><td><input type=text class="textfield" /></td></tr> 
    <tr><td>Điện thoại :</td><td><input type=text class="textfield" /></td></tr>
    <tr><td>Số tài khoản :</td><td><input type=text class="textfield" /></td></tr>
    <tr><td>Địa chỉ liên lạc :</td><td><input type=text class="textfield" /></td></tr>
    <tr><td colspan=2><input type=button value="Thanh toán" onclick="thanhtoan();"</td></tr>
    </table>
</div>
</asp:Content>

